<template>
	<view style="padding-bottom:130rpx">
		<!-- 订单配送信息 -->
		<view class="radius-box">
			<!-- 收货地址 -->
			<view class="address between" @click="selectAddress">
				<uni-icons type="location" size="30"></uni-icons>
				<view v-if="cneeList.length<1" class="address-info my-tawny" style="text-align: right;">请选择收货地址</view>
				<view v-else class="address-info">
					<view> {{cneeData.name}} <text class="phone font-25">{{cneeData.phone}}</text></view>
					<view class="font-25" style="margin-top: 20rpx;">{{fullAddress}}</view>
				</view>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<!-- 选择收货地址的弹出层 -->
			<uni-popup ref="popupAddress" type="bottom">
				<view class="adress-popup">
					<view class="popup-title">选择收货地址</view>
					<view class="close-btn" @click="$refs.popupAddress.close()">
						<uni-icons type="closeempty" size="22" color="#c8c9cc"></uni-icons>
					</view>
					<view class="address-tag-list">
						<view class="address-tag" :class="{checked:checked==i}" v-for="(item,i) in cneeList" :key="i"
							@click="handleChecked(i)">
							<cnee-card :cneeData="item"></cnee-card>
						</view>
					</view>
					<view class="add-address-box">
						<navigator url="/subpkg/add-address/add-address" class="add-address-btn">
							新增地址
						</navigator>
					</view>
				</view>
			</uni-popup>
			<!-- 配送方式 -->
			<view class="delivery-mode between">
				<view>配送方式</view>
				<view>同城配送 免运费</view>
			</view>
			<!-- 送达时间 -->
			<view class="delivery-time between">
				<view>送达时间</view>
				<view class="between">
					<uni-datetime-picker type="datetime" :start="minTime" :hide-second="true" v-model="deliveryTime">
						<text class="check-time" v-if="!deliveryTime">请选择期望送达时间</text>
						<text class="check-time" v-else>{{deliveryTime}}</text>
					</uni-datetime-picker>
					<uni-icons type="right" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 订单商品 -->
		<view class="radius-box">
			<view class="between" style="width: 160rpx">
				<uni-icons type="shop" size="20"></uni-icons>
				<text style="padding-bottom: 5rpx;">阳光蛋糕</text>
			</view>
			<!-- 商品列表>商品组件 -->
			<view style="padding-bottom: 20rpx;" v-for="item in pendingOrder" :key="item._id">
				<cart-goods :buyData="item" :isLeave="false">
					<view style="padding-top: 20rpx;font-size: 25rpx;color:#999">{{item.size}}</view>
				</cart-goods>
			</view>
			<!-- 商品数量、价格总计 -->
			<view style="padding:20rpx 0;text-align: right;">
				共{{totalBuyNum}}件&nbsp;商品小计：<text class="my-tawny" style="	font-size: 22rpx;">￥<text
						style="font-size: 30rpx">{{totalPrice}}</text>.00</text>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="radius-box between">
			<text>优惠券</text>
			<view>
				<text style="padding-right: 10rpx;color: #969799;">暂无可用</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
		</view>
		<!-- 买家留言 -->
		<view class="radius-box between" style="justify-content: flex-start;align-items: flex-start;">
			<view class="message-title">买家留言</view>
			<textarea auto-height v-model="message" placeholder="留言建议提前协商 (240字以内)"
				style="flex: 1;padding: 3rpx 0 0 50rpx;text-align: right;" />
		</view>
		<!-- 底部提交订单 -->
		<view class="submit-order between">
			<view>
				应付：<text class="my-tawny" style="	font-size: 25rpx;font-weight: 700;">￥
					<text style="font-size: 35rpx">{{totalPrice}}</text>.00</text>
			</view>
			<view class="submit-btn" @click="submitOrder">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				checked: 0, // 当前选中地址的索引
				deliveryTime: '', // 送货时间
				message: '', // 买家留言
			};
		},
		computed: {
			...mapState({
				// 待确认订单商品数据
				pendingOrder: ({
					order
				}) => order.pendingOrder,
				// 收货地址列表
				cneeList: ({
					user
				}) => user.cneeList,
			}),
			totalBuyNum() { // 商品总数
				return this.pendingOrder.reduce((pre, curr) => pre + curr.buy_num, 0)
			},
			totalPrice() { // 商品总价
				return this.pendingOrder.reduce((pre, curr) => {
					return pre + curr.price * curr.buy_num;
				}, 0)
			},
			// 当前选中地址信息
			cneeData() {
				return this.cneeList[this.checked];
			},
			// 详细地址
			fullAddress() {
				let {
					city,
					address,
					doorplate
				} = this.cneeData;
				return city + ' ' + address + doorplate;
			},
			// 时间最小值
			minTime() {
				let now = +new Date();
				return now + 7200000;
			}
		},
		watch: {
			cneeData(newVal) {
				if (!newVal.name) {
					this.checked = 0;
				}
			},
			deliveryTime(newVal) {
				if (newVal.length < 16) {
					this.deliveryTime = ''
				}
			}
		},
		onLoad() {
			this.$store.dispatch('getCneeList');
		},
		methods: {
			// 打开选择地址弹出层
			selectAddress() {
				this.$refs.popupAddress.open();
			},
			// 点击地址标签更改选中索引
			handleChecked(i) {
				this.checked = i;
				this.$refs.popupAddress.close();
			},
			// 提交订单
			submitOrder() {
				if (!this.cneeData || !this.deliveryTime) {
					uni.showToast({
						title: '请填写完整收货信息',
						icon: 'none'
					})
					return
				}
				let data = this.getSubmitOrderData();
				uni.$http.reqSubmitOrder(data);
				uni.showToast({
					title: '请勿进行操作',
					icon: 'loading',
					success() {
						let timer = setTimeout(() => {
							clearTimeout(timer)
							uni.redirectTo({
								url: '/subpkg/order-list/order-list?active=1'
							})
						}, 2000)
					}
				})

			},
			// 整理提交订单的信息
			getSubmitOrderData() {
				let {
					deliveryTime,
					pendingOrder,
					message,
					fullAddress,
					totalBuyNum,
					totalPrice,
					user_id
				} = this;
				let {
					name,
					phone
				} = this.cneeData;
				return {
					user_id, // 用户id
					name, // 收货人名字
					phone, // 手机
					address: fullAddress, //详细地址
					deliveryTime, // 预定收货时间
					goodsData: pendingOrder, // 商品列表
					totalNum: totalBuyNum, // 商品总数
					totalPrice, // 订单总价
					message, // 订单留言
					status: 1 // 订单状态 0已关闭  1代付款  2待发货  3待收货  4待评论
				}
			}
		}
	}
</script>

<style lang="scss">
	.radius-box {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		font-size: 28rpx;
		border-radius: 15rpx;
		background-color: #fff;
	}

	.between {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.font-25 {
		font-size: 25rpx;
	}

	.address-info {
		flex: 1;
		padding: 0 25rpx;
		overflow: hidden;

		.phone {
			padding-left: 20rpx;
			color: #949494;
			vertical-align: bottom;
		}
	}

	.check-time {
		padding-right: 10rpx;
		color: $my-tawny;
	}

	.my-tawny {
		color: $my-tawny;
	}

	.submit-order {
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		width: 100vw;
		padding: 10rpx 20rpx;
		background-color: #fff;

		.submit-btn {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 40rpx;
			background-color: $my-tawny;
		}
	}

	.adress-popup {
		position: relative;
		height: 60vh;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #f7f8fa;
		border-radius: 25rpx 25rpx 0 0;

		.popup-title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			background-color: #fff;
		}

		.close-btn {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			;
		}

		.address-tag-list {
			height: calc(60vh - 170rpx);
			overflow-y: auto;

			.address-tag {
				margin: 20rpx 20rpx 0;
				opacity: 0.5;

				&:last-child {
					margin-bottom: 50rpx;
				}
			}

			.checked {
				border: 2px solid #f00;
				border-radius: 15rpx;
				opacity: 1;
			}
		}

		.add-address-box {
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 6rpx 30rpx;
			background-color: #fff;

			.add-address-btn {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				border-radius: 35rpx;
				background-color: $my-tawny;
			}
		}
	}
</style>
